<template>
    <div class="homeworp">
        <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in homelists" :key="index">
                <img :src="item.image" alt="" />
            </div>

        </div>
        </div>
        <div class="homebody">
             <dl v-for="(item,index) in homebody" :key="index">
                 <dt><img src="" alt=""></dt>
                 <dd>{{item}}</dd>
             </dl>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper"
import "swiper/swiper.min.css"
import {homebannerList} from "../../../api/api"
export default {
   data(){
       return {
           homelists:[],
           homebody:[
               "蔬菜每日鲜","肉蛋禽","母婴天地","进店必买","美通卡",
               "早晚市","品牌惠","领劵中心","支付优惠","直采品牌"
           ] 
       }
   },
  async created(){
        this.getSwiper()
   },
   methods:{
      async getSwiper(){
          let res =await homebannerList();
          console.log(res,"****");
          if(res.data.status==200){
              this.homelists=res.data.data;
              this.$nextTick(()=>{
                  new Swiper(".swiper-container")
              })
          }
      }
   }
}
</script>

<style lang="scss">
.homeworp{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.swiper-container{
    height: 150px;
    width: 100%;
   .swiper-wrapper,.swiper-slide{
       width: 100%;
       height: 100%;
       img{
           width: 100%;
           height: 100%;
       }
   }
}
.homebody{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    
    flex-wrap: wrap;
    font-size: 14px;
    dl{
        width: 20%;
        text-align: center;
        img{
            width: 30px;
            height: 30px;
        }
    }
}
</style>